<template>
  <div v-if="isVisible" class="popup-overlay" @click.self="closePopup">
    <!-- 如果isVisible为true，则显示弹出框 -->
    <div :style="{ width: width, height: height }" class="popup">
      <!-- 直接调用background视差组件 -->
      <BackgroundComponent :backgroundLayers="imageInfos" :speeds="speeds" :style="{ width: width, height: height }" class="backgroundComponent"/>
      <button @click="closePopup">关闭</button>
      <!-- 点击按钮时，调用closePopup方法 -->
    </div>
  </div>
</template>

<script setup>
  import {
    ref,
  } from 'vue';
  import imageConfig from '@/utils/imagesManager.js';
  import BackgroundComponent from '@/pages/components/background.vue';

  const props = defineProps({
    isVisible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '300px'
    },
    height: {
      type: String,
      default: '200px'
    },
    imageInfos: {
      type: Array,
      required: true
    },
    // 每层的移动速度数组，默认值为 [0.1, 0.2, 0.3]
    speeds: {
      type: Array,
      default: () => [0.1, 0.2, 0.3]
    }
  });

  const emits = defineEmits(['close']);

  const closePopup = () => {
    emits('close');
  };
</script>

<style scoped>
 .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .popup {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

 .backgroundComponent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
  }

 .popup img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 为每张图片添加间距 */
    position: relative;
    /* 添加相对定位，以便z-index生效 */
  }

 .popup button {
    border: none;
    color: white;
    cursor: pointer;
    position: absolute;
    /* 设置绝对定位 */
    bottom: 5px;
    /* 距离底部10px */
    left: 50%;
    /* 左侧定位到50% */
    transform: translateX(-50%);
    /* 向左平移按钮自身宽度的一半，实现水平居中 */
    background-color: transparent; /* 设置按钮背景颜色为透明 */
	width: 20%;
	height: 10%;
  }

 .popup button:hover {}
</style>
    